<script setup lang="ts">
import { ref, onMounted, onUnmounted, onBeforeMount } from 'vue'
import DesktopView from '../home/index.vue'
import MobileView from '../home/mobile.vue'

defineOptions({
  name: 'ChatMain'
})

const isMobile = ref(false)

const checkScreenSize = () => {
  isMobile.value = window.innerWidth < 768

  console.log(isMobile.value)
}
onMounted(() => {
  checkScreenSize()
  window.addEventListener('resize', checkScreenSize)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkScreenSize)
})
</script>

<template>
  <component :is="isMobile ? MobileView : DesktopView" />
</template>
